<template>
  <div>

  </div>
</template>

<script>
  import DynamicForm from '../../src/dynamic-form'
  import FormGroup from '../../src/dynamic-form/components/FormGroup.vue'
  import DataGrid from '../../src/data-grid'

  export default {
    components: {DynamicForm, FormGroup, DataGrid},
    data () {
      return {
        dgConfig: {
          columns: [
            {
              field: 'id',
              title: '编号',
              checkbox: true,
              checkAll: true,
              resizable: true,
              defaultZort: 'desc',
              width: 120,
              fixed: 'left'
            },
            {
              field: 'name',
              title: '名称',
              resizable: true,
              defaultZort: 'desc'
            }
          ],
          autoLoad: true,
          selectionMultiple: true,
          selectionNotEqualsChecking: false,
          checkStateIgnoreDisabled: false,
          dataSource: [
            {id: 1, name: '01'},
            {id: 2, name: '02'},
            {id: 3, name: '03'}
          ]
        },
        model: {tt: 1, model: 2, color: true, manufacturer: ['Hello'], brand: true},
        formSchema: {},
        field: {
          componentType: 'InputText',
          name: 'name1',
          label: '商品名',
          validators: {
            required: true,
            maxLength: 20,
            notEqualTo: '${name1}',
            dependsOn: 'name1'
          }
        },
        field2: {
          componentType: 'InputText',
          name: 'name_1',
          label: '商品名',
          validators: {
            required: true,
            maxLength: 20
          }
        },
        field1: {
          name: 'name1',
          label: '商品名1',
          fields: [],
          repeatable: true
        },
        formSchema1: {
          formClass: 'va-df-form-horizontal-60 va-df-form-inline',
          fields: [
            {
              name: 'basic',
              label: '基础信息',
              fields: [
                {
                  componentType: 'InputText',
                  name: 'name',
                  label: '商品名',
                  validators: {
                    required: true,
                    maxLength: 20
                  }
                },
                {
                  componentType: 'InputRate',
                  count: 5,
                  allowHalf: true,
                  name: 'model',
                  label: '型号',
                  disabled: false
                },
                {
                  componentType: 'InputSelect',
                  name: 'unit',
                  label: '计量单位',
                  optionValueProp: 'id',
                  optionLabelProp: 'name',
                  disabled: false,
                  dataSource: [{id: 1, name: 'a'}, {id: 2, name: 'b'}]
                },
                {
                  componentType: 'InputSwitch',
                  name: 'tt',
                  label: '计量单位',
                  trueLabel: '正',
                  falseLabel: '反',
                  trueValue: 1,
                  falseValue: 0,
                  disabled: true
                },
                {
                  componentType: 'InputCheckboxGroup',
                  name: 'manufacturer',
                  label: '厂商',
                  dataSource () {
                    return new Promise((resolve) => {
                      setTimeout(() => {
                        resolve([
                          'Hello',
                          'World',
                          null
                        ])
                      }, 1000)
                    })
                  },
                  itemDisabled (item) {
                    console.log(item, 'item')
                    return item === 'Hello'
                  },
                  disabled: false
                },
                {
                  componentType: 'InputCheckboxGroup',
                  name: 't11',
                  label: '厂商',
                  dataSource: [
                    'Hello',
                    'World',
                    null
                  ],
                  itemDisabled (item) {
                    console.log(item, 'item')
                    return item === 'Hello'
                  },
                  single: true,
                  disabled: false
                },
                {
                  componentType: 'InputCombo',
                  name: 'single',
                  label: '单选',
                  dataSource () {
                    return [
                      {id: 2, name: '选择2'},
                      {id: 3, name: '选择3'},
                      {id: 4, name: '选择4'}
                    ]
                  },
                  tableFullWidth: true,
                  valueProp: 'id',
                  displayProp: 'name',
                  comboMultiSelection: false,
                  comboHeadVisible: false,
                  comboEnableToggleSelection: true, // 仅对于单选有效，默认false
                  comboColumns: [
                    {
                      field: 'name',
                      title: '名称'
                    }
                  ]
                },
                {
                  componentType: 'InputCheckbox',
                  name: 'color',
                  label: '颜色',
                  disabled: true
                },
                {
                  componentType: 'InputRadio',
                  name: 'brand',
                  label: '品牌',
                  disabled: true
                },
                {
                  componentType: 'InputRadioGroup',
                  name: 'ttt',
                  label: 'ttt',
                  dataSource () {
                    return new Promise((resolve) => {
                      setTimeout(() => {
                        resolve([
                          'Hello',
                          'World',
                          false,
                          1
                        ])
                      }, 1000)
                    })
                  },
                  itemDisabled (item) {
                    console.log(item, 'item')
                    return item === 'Hello'
                  },
                  disabled: false
                },
                {
                  componentType: 'InputTextarea',
                  name: 'description',
                  label: '商品描述',
                  textareaRows: 6
                },
                {
                  componentType: 'InputText',
                  name: 'salesvolume',
                  inputPattern: 'number_positive',
                  inputDataType: 'number',
                  label: '销量',
                  validators: {
                    required: true
                  }
                },
                {
                  name: 'props',
                  label: '属性设置',
                  description: '【重要】表示此属性会直接显示在商品详情页面中',
                  labelStyle: {'font-size': '12px'},
                  repeatItemWrapperClass: 'df-form-horizontal-100',
                  repeatActionsWrapperStyle: {'text-align': 'center'},
                  repeatActionButtonClass: 'btn btn-xs btn-primary',
                  repeatable: true,
                  fields: [
                    {
                      componentType: 'InputText',
                      name: 'name',
                      label: '属性名称',
                      validators: {
                        required: true
                      }
                    },
                    {
                      componentType: 'InputText',
                      name: 'value',
                      label: '属性值',
                      validators: {
                        required: true
                      }
                    }
                  ]
                }
              ]
            },
            {
              name: 'price',
              label: '销售设置',
              inputWrapperClass: 'df-form-horizontal-100',
              fields: [
                {
                  componentType: 'InputText',
                  name: 'stock',
                  label: '初始库存',
                  inputPattern: 'number_positive',
                  inputDataType: 'number',
                  validators: {
                    required: true,
                    min: 0
                  }
                },
                {
                  componentType: 'InputText',
                  name: 'originalprice',
                  label: '原价',
                  inputPattern: 'number_positive',
                  inputDataType: 'number',
                  validators: {
                    required: true,
                    min: 0
                  }
                },
                // {
                //   componentType: 'InputText',
                //   name: 'minprice',
                //   label: '最低折扣价',
                //   inputPattern: 'number_positive',
                //   inputDataType: 'number',
                //   validators: {
                //     required: true,
                //     min: 0
                //   }
                // },
                {
                  name: 'discountSetting',
                  label: '折扣设置',
                  labelStyle: {'font-size': '12px'},
                  formGroupStyle: {width: '100%'},
                  repeatActionsWrapperStyle: {'text-align': 'center'},
                  repeatActionButtonClass: 'btn btn-xs btn-primary',
                  repeatable: true,
                  description: '所有折扣概率相加应该等于100',
                  fields: [
                    {
                      componentType: 'InputText',
                      name: 'name',
                      label: '名称',
                      labelStyle: {width: '60px'},
                      validators: {
                        required: true,
                        maxLength: 20
                      }
                    },
                    {
                      componentType: 'InputText',
                      name: 'discount',
                      label: '折扣',
                      addon: '折',
                      inputPattern: 'number_positive',
                      labelStyle: {width: '60px'},
                      inputDataType: 'number',
                      validators: {
                        required: true,
                        max: 10,
                        min: 0
                      }
                    },
                    {
                      componentType: 'InputText',
                      name: 'probability',
                      label: '概率',
                      addon: '%',
                      inputPattern: 'number_positive',
                      inputDataType: 'number',
                      labelStyle: {width: '60px'},
                      validators: {
                        required: true,
                        max: 100,
                        min: 0
                      }
                    }
                  ]
                }
              ]
            }
          ]
        }
      }
    },
    mounted () {
      console.log('route', this.$router, this.$route)
    }
  }
</script>
